<div class="row">
  <div class="col-xs-12 col-12 col-sm-6 col-md-3 form-group mb-3 d-flex flex-column justify-content-between">
    <p>The datepicker's placement is right</p>
    <input class="form-control"
      placeholder="Datepicker"
      bsDatepicker
      placement="right">
  </div>
  <div class="col-xs-12 col-12 col-sm-6 col-md-3 form-group mb-3 d-flex flex-column justify-content-between">
    <p>The datepicker's placement is top</p>
    <input class="form-control"
      placeholder="Datepicker"
      bsDatepicker
      placement="top">
  </div>
  <div class="col-xs-12 col-12 col-sm-6 col-md-3 form-group mb-3 d-flex flex-column justify-content-between">
    <p>The datepicker's placement is bottom</p>
    <input class="form-control"
      placeholder="Datepicker"
      bsDatepicker
      placement="bottom">
    </div>
  <div class="col-xs-12 col-12 col-sm-6 col-md-3 form-group mb-3 d-flex flex-column justify-content-between">
    <p>The datepicker's placement is left</p>
    <input class="form-control"
      placeholder="Datepicker"
      bsDatepicker
      placement="left">
  </div>
</div>
